<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-button type="success" @click="addAdmin">添加</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="50">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="education"
                label="学历">
        </el-table-column>
        <el-table-column
                prop="adminPhonenumber"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="adminUrl"
                label="头像"
        >
            <template slot-scope="scope">
                <img :src="scope.row.adminUrl" width="50" height="60"/>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="deleteAdmin(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="editAdmin(scope.row)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small" @click="showRoleDialog(scope.row.id)">分配角色</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
            title="分配角色"
            :visible.sync="dialogVisible01"
            width="30%"
            >
        <el-checkbox-group v-model="checkRole">
            <el-checkbox v-for="role in roles" :label="role.roleId+''" :key="role.roleId+''">{{role.roleName}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
    </el-dialog>
    <!--    分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!-- 修改弹出层-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-upload
                class="avatar-uploader"
                action="/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">
            <el-form-item label="名称">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-input v-model="editForm.education"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="editForm.adminPhonenumber"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
        </span>
    </el-dialog>
    <!--添加的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="提示"
            :visible.sync="adddialogVisible"
            width="30%"
            @close="dialogClose"

    >
        <!--:model:绑定表单数据-->
        <el-form  label-width="80px" :model="addForm" ref="addFormRef" >
            <el-upload
                    class="avatar-uploader"
                    action="/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <el-form-item label="名称">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="学历" >
                <el-input v-model="addForm.education"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="addForm.idcard"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="addForm.adminPhonenumber"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAdd">确认添加</el-button>
                      </span>
    </el-dialog>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:0,
            //选中的id值
            checkRole:[],
            //所有的角色
            roles:[],
            imageUrl:"",
            editForm:{},
            addForm:{},
            dialogVisible: false,
            dialogVisible01:false,
            adddialogVisible:false,
            //用户id
            adminId:0,

        },
        created(){
            this.initTable();
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable()
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                console.log(this.imageUrl)
            },
            dialogClose(){
                this.$refs.addFormRef.resetFields();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //确认分配角色
            qr(){
                axios.post("/admin/qr?adminId="+this.adminId+"&roleIds="+this.checkRole).then(resp=>{
                    this.$message.success("分配成功");
                    this.dialogVisible01=false;
                })
            },
            //添加
            addAdmin(){
                this.adddialogVisible=true;
            },
            //确认添加
            confirmAdd(){
                this.addForm.adminUrl=this.imageUrl;
                axios.post("/admin/add",this.addForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("添加员工信息成功")
                        //关闭弹出层
                        this.adddialogVisible=false;
                        //重新加在表格数据
                        this.initTable();
                    }
                });
            },
            //删除
            deleteAdmin(row){
                axios.post("admin/delete?id="+row.id).then(resp=>{
                    this.$message.success("删除信息成功")
                    this.initTable();
                })
            },
            //修改
            editAdmin(row) {
                this.dialogVisible = true;
                this.editForm = row;
                this.imageUrl = row.adminUrl;
            },
            //确认修改
            confirmUpdate(){
                this.editForm.adminUrl= this.imageUrl;
                axios.post("/admin/update", this.editForm).then(result => {
                    if (result.data.code === 200) {

                        this.$message.success("修改信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.initTable();
                    }
                })
            },
            showRoleDialog(adminId){
                this.adminId=adminId;
                this.dialogVisible01=true;
                //1. 查询所有的角色
                //2.当前用户具有的角色id
                axios.get("/role/list?adminId="+adminId).then(resp=>{
                    this.roles=resp.data.data.list;
                    this.checkRole=resp.data.data.roleIds;
                })
            },

            initTable(){
                axios.post("/admin/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            }
        }
    })
</script>
<style>
    html,body,#app{
        margin: 0px;
        padding: 0px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 500px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
</html>
